// 面向对象--》研究对象 ---》抽象类；---》研究类之间逻辑关系；---》组织逻辑关系；
// 玩家、英雄、技能 、皮肤
// 玩家类 、每个英雄类、 每个技能类、每个皮肤类；游戏管理类；
import Game from './game/game.js';
let game = new Game();
let eles = {
    login:{
        loginView:document.querySelector(".login"),
        username:document.querySelector(".username"),
        loginBtn:document.querySelector(".sub")
    },
    game:{
        gameView:document.querySelector(".game"),
        chioseusername:document.querySelector(".chioseusername"),
        heroView:document.querySelector(".heroView"),
        heroShow:document.querySelector(".heroShow"),
        skillsView:document.querySelector(".skillsView")
    }
}

eles.login.loginBtn.onclick = function(){
    let username = eles.login.username.value;
    if(username!==""){
        game.login(username);
        eles.login.loginView.style.display = "none";
        eles.game.gameView.style.display = "block";
        // console.log(game);
        // 显示用户名；
        eles.game.chioseusername.innerHTML = game.player.name;
        // 显示英雄；
        eles.game.heroView.innerHTML = "";
        game.player.heros.forEach(hero=>{
            let heroItem = document.createElement("div");
            heroItem.classList.add("heroItem");
            heroItem.innerHTML  =`<img src="./sources/${hero.icon}" />
            <span>${hero.name}</span>`;
            eles.game.heroView.appendChild(heroItem);
            heroItem.onclick = function(){
                eles.game.heroShow.innerHTML = `<img src="./sources/${hero.icon}" />`;
                console.log(game);
                // eles.game.skillsView.
                hero.skills.forEach(skill=>{
                    let img = new Image();
                    img.src = "sources/"+skill.icon;
                    eles.game.skillsView.appendChild(img);
                })
            }
        })
    }

}

